<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>德云社注册页面</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="left">
        <div class="logo">
            <img src="images/logo.png" alt="">
        </div>
        <div class="sologan">
        <h1>爱的和本该爱的，都是相声。</h1>
        <p>陪云鹤九霄变老，看龙腾四海长大</p>
        </div>
        <div class="copyright">
            <p>帮助中心 | 2020&copy;guodegang.org</p>
        </div>
    </div>

    <div class="right">
        <form action="">
            <table>
                <caption>欢迎注册</caption>
                <tr>
                    <td>已经有账号？<a href="http://www.guodegang.org">登录</a></td>
                </tr>
                <tr>
                    <td>
                        <lable for="">用户名</lable>
                        <input type="text" placeholder="请输入您的用户名">
                    </td>
                </tr>
                <tr>
                    <td>
                        <lable for="">手机号</lable>
                        <input type="text" placeholder="可以用于登录和找回密码">
                    </td>
                </tr>
                <tr>
                    <td>
                        <lable for="">密&nbsp;&nbsp;&nbsp;码</lable>
                        <input type="password" placeholder="请设置登录密码">
                    </td>
                </tr>
                <tr>
                    <td>
                        <lable for="">验证码</lable>
                        <input class="input-mini" type="text" placeholder="请输入验证码">
                        <button class="get">获取验证码</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="resgit">
                            注册
                        </button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input class="check" type="checkbox"><label for="">阅读并接受《用户协议》</label>
                    </td>
                </tr>
            </table>
        </form>
        

        
<div class="guanggao-dbbox">
    <div class="nb-nodeboard-top">
        <span class="fl">请您留言</span>
        <span class="fr" id="nb-close"><img src="style/images/nodeMin.png" alt=""></span>
        <span class="fr" id="nb-gb"><img src="style/images/nodeMin.png" alt=""></span>
        <span class="fr" id="nb-show"><img src="style/images/nodeMax.png" alt=""></span>
    </div>
    <div class="nb-nodeboard-text">
        <p class="nb-nodeboard-company">八六建筑贵宾加急通道</p>
        <p class="nb-nodeboard-link">代办申请</p>
    </div>
    <form id="nb_nodeboard_form" autocomplete="off" class="nb-board-form" action="" method="post" >
        <div class="nb-nodeboard-content">
            <textarea id="nb-nodeboard-set-content-js" name="square"  placeholder="请在此输入留言内容，我们会尽快与您联系。(必填)"></textarea>
            <p class="nb-nodeboard-tips" id="nb-nodeboard-tips-js"></p>
        </div>

        <div class="nb-nodeboard-inputbox" id="nb-nodeboard-name" >
            <span class="nb-nodeboard-icon nodeName"></span>
            <input id="nb_nodeboard_set_name" data-write="0" name="name" maxlength="10"  type="text"  placeholder="姓名">
        </div>

        <div class="nb-nodeboard-inputbox" id="nb_nodeboard_phone" >
            <span class="nb-nodeboard-icon nodePhone"></span>
            <input id="nb_nodeboard_set_phone" name="tel" maxlength="11" class="nb-nodeboard-param"  type="text"  placeholder="手机号(必填)">
        </div>
        <p class="nb-nodeboardphone-tips" id="nb-nodeboardphone-tips-js"></p>
        <div id="nb_nodeboard_send" needverifycode="1" class="nb-nodeboard-send-btn">发 送</div>
    </form>
</div>

<!--/浮动窗口-->
<div class="nb-dingwei">
    <div class="container">
        <div class="nb-fd-close" onclick="closenb()"><img src="/style/images/close.png" alt=""></div>
        <div class="nb-fd-content">
            <p>您的专属VIP通道<br>办理咨询</p>
            <div class="anniubox">
                <span class="nb-sh" onclick="closenb()">稍后再说</span>
                <span class="nb-dk" onclick="opennb()">现在咨询</span>
            </div>
        </div>
    </div>
</div>
<div class="nb-online-box" onclick="opennb()"><h2>在线咨询</h2><p>Online Consulting</p></div>





<style>
    .xz {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100px;
        height: 100px;
    }
    
    .wrap {
        width: 100px;
        height: 100px;
        margin: 150px 0 0 150px;
        /*position: relative;*/
        position: absolute;
    }
    /*包裹所有容器样式*/
    
    .cube {
        width: 50px;
        height: 50px;
        margin: 0 auto;
        transform-style: preserve-3d;
        transform: rotateX(-30deg) rotateY(-80deg);
        animation: rotate linear 20s infinite;
    }
    
    @keyframes rotate {
        from {
            transform: rotateX(0deg) rotateY(0deg);
        }
        to {
            transform: rotateX(360deg) rotateY(360deg);
        }
    }
    
    .cube div {
        position: absolute;
        width: 200px;
        height: 200px;
        opacity: 0.5;
        transition: all .4s;
    }
    /*定义所有图片样式*/
    
    .pic {
        width: 200px;
        height: 200px;
    }
    
    .cube .out_front {
        transform: rotateY(0deg) translateZ(100px);
    }
    
    .cube .out_back {
        transform: translateZ(-100px) rotateY(180deg);
    }
    
    .cube .out_left {
        transform: rotateY(-90deg) translateZ(100px);
    }
    
    .cube .out_right {
        transform: rotateY(90deg) translateZ(100px);
    }
    
    .cube .out_top {
        transform: rotateX(90deg) translateZ(100px);
    }
    
    .cube .out_bottom {
        transform: rotateX(-90deg) translateZ(100px);
    }
    /*定义小正方体样式*/
    
    .cube span {
        display: block;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 50px;
    }
    
    .cube .in_pic {
        width: 100px;
        height: 100px;
    }
    
    .cube .in_front {
        transform: rotateY(0deg) translateZ(50px);
    }
    
    .cube .in_back {
        transform: translateZ(-50px) rotateY(180deg);
    }
    
    .cube .in_left {
        transform: rotateY(-90deg) translateZ(50px);
    }
    
    .cube .in_right {
        transform: rotateY(90deg) translateZ(50px);
    }
    
    .cube .in_top {
        transform: rotateX(90deg) translateZ(50px);
    }
    
    .cube .in_bottom {
        transform: rotateX(-90deg) translateZ(50px);
    }
    /*鼠标移入后样式*/
    
    .cube:hover .out_front {
        transform: rotateY(0deg) translateZ(200px);
    }
    
    .cube:hover .out_back {
        transform: translateZ(-200px) rotateY(180deg);
    }
    
    .cube:hover .out_left {
        transform: rotateY(-90deg) translateZ(200px);
    }
    
    .cube:hover .out_right {
        transform: rotateY(90deg) translateZ(200px);
    }
    
    .cube:hover .out_top {
        transform: rotateX(90deg) translateZ(200px);
    }
    
    .cube:hover .out_bottom {
        transform: rotateX(-90deg) translateZ(200px);
    }
</style>
</head>

<body>
<div class="xz">
    <!-- 外层最大容器 -->
    <div class="wrap">
        <!--包裹所有元素的容器-->
        <div class="cube">
            <!--前面图片 -->
            <div class="out_front">
                <img src="./images/t1.png" class="pic">
            </div>
            <!--后面图片 -->
            <div class="out_back">
                <img src="./images/t2.png" class="pic">
            </div>
            <!--左面图片 -->
            <div class="out_left">
                <img src="./images/t3.png" class="pic">
            </div>
            <!--右面图片 -->
            <div class="out_right">
                <img src="./images/t4.png" class="pic">
            </div>
            <!--上面图片 -->
            <div class="out_top">
                <img src="./images/t5.png" class="pic">
            </div>
            <!--下面图片 -->
            <div class="out_bottom">
                <img src="./images/t5.png" class="pic">
            </div>

            <!--小正方体 -->
            <span class="in_front">
                <img src="./images/t6.png" class="in_pic">
            </span>
            <span class="in_back">
                <img src="./images/t7.png" class="in_pic">
            </span>
            <span class="in_left">
                <img src="./images/t8.png" class="in_pic">
            </span>
            <span class="in_right">
                <img src="./images/t1.png" class="in_pic">
            </span>
            <span class="in_top">
                <img src="./images/t2.png" class="in_pic">
            </span>
            <span class="in_bottom">
                <img src="./images/t3.png" class="in_pic">
            </span>
        </div>
    </div>
</div>






    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/shangqiao.js"></script>
    <script src="js/timeGeneration.js"></script>
</body>
</html>